const Compiler = require("@vue/compiler-sfc");
const Freemarker = require("freemarker");
const fm = new Freemarker({ root: __dirname });
const fs = require("fs");
const path = require("path");

fs.readFile("./vue/demo.vue", { encoding: "utf-8" }, (err, data) => {
  if (err) throw new Error(err.message);
  const parserObj = Compiler.parse(data, {
    sourceMap: false,
    ignoreEmpty: true,
  });
  const { template, script, styles } = parserObj.descriptor;
  // console.log(template.ast)
  // console.log(Compiler.compileScript(parserObj.descriptor))
  // console.log(Compiler.compileTemplate(template))
  // console.log(script)
  // console.log(styles)
  // console.log(Compiler.parse(data))
});

// fm.render("<h1>${title}</h1>", { title: "hello world" }, (err, res) => {
//   if (err) throw new Error(err.message)
//   console.log(res)
// })

const background_data = {
  propsJson: JSON.stringify({
    bordercolor: "rgba(0,0,0,0)",
    borderalign: "solid",
    backradius: 1,
    backimage: "hello",
    backShowImage: true,
    // backDefaultImage: "data:image/png;",
    // backDefaultImageName: "4_title-1_333x94.png",
    // backDefaultImageName: "",
    // borderhavelabel: true,
    borderwidth: 1,
  }),
  resourcePath: "IMG",
};

const title_data = {
  propsJson: JSON.stringify({
    // backImage: "D785D820-04BF-488A-8020-A6144D42C2C1-1643100785321.png",
    // backImage: "",
    // backimage: "",
    // backDefaultImage: "http://localhost:8081/img/4_title-1_333x94.4bba8ccf.png",
    // backDefaultImageName: "4_title-1_333x94.png",
    // backDefaultImageName: "",
    // backRadius: 1,
    // backShowImage: true,
    // fonttext: "二级菜单字体样式",
    // fontText: "二级菜单字体样式",

    // fontSize: 23,
    // fontSpacing: 2,
    // fontFamily: "initial",
    // fontColor: "rgba(255,255,255,0.8)",
    fontGradient: {
      show: true,
      angle: 0,
      toColor: "yellow",
      fromColor: "red",
    },
    fontShadow: {
      size: 4,
      color: "rgba(45,128,228,1)",
      show: true,
    },
    // fontStyles: [],
    // fontHorizonAlign: "center",
    // fontposition: "right",
    // paddingLeft: 93,
    // paddingTop: 13,
    // paddingRight: 0,
    // paddingBottom: 0,
    dashboardId: "",
    shareToken: "",
  }),
  resourcePath: "IMG",
};

const border_data = {
  propsJson: JSON.stringify({
    borderIsShow: true,
    borderColor: "rgba(88,157,218,0.42)",
    borderWidth: 3,
    borderStyle: "solid",
    cornerIsShow: true,
    cornerColor: "rgba(88,114,218,1)",
    cornerLength: 30,
    cornerWidth: 5,
    prop: "123",
  }),
};

function renderFtl2Vue(ftlFilePath, data) {
  const targetPath = ftlFilePath.replace(/ftl/g, "vue");
  //! 使用renderFile，必须在创建构造对象时，指定根路径
  fm.renderFile(ftlFilePath, data, (err, res) => {
    if (err) throw new Error(err);
    fs.writeFile(targetPath, res, { encoding: "utf-8" }, () => {
      console.log(`生成Vue文件成功！${targetPath}`);
    });
  });
}

const bar_data = {
  propsJson: JSON.stringify({
    YhaveLine: true,
    legendtop: 20,
    Ylinecolor: "rgba(255,255,255,0.08)",
    legendleft: 9,
    Xhave: true,
    graphicbottom: 9,
    labellayout: "top",
    labelcolor: "rgba(255,255,255,0.58)",
    legendbottom: 9,
    graphicright: 1,
    labelhave: true,
    backRadius: 0,
    backShowImage: true,
    Yhave: true,
    XhaveLine: false,
    legendorient: "horizontal",
    Xcolor: "rgba(255,255,255,0.58)",
    legendposition: "left",
    graphicleft: 9,
    Ycolor: "rgba(255,255,255,0.58)",
    graphictop: 20,
    graphiccolor: [
      {
        colorStops: [
          {
            color: "#2193b0",
            offset: 0,
          },
          {
            color: "#e90b0e",
            offset: 1,
          },
        ],
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        type: "linear",
        global: false,
      },
      "#61ddaa",
      "#65789b",
      "rgba(246,189,22,1)",
      "#7262fd",
      "#78d3f8",
      "#9661bc",
      "#f6903d",
      "#008685",
      "#f08bb4",
    ],
    backImage: "",
    Xlinecolor: "rgba(255,255,255,.8)",
    legendright: 1,
    legendlayout: "top",
    legendcolor: "rgba(255,255,255,0.58)",
  }),
  modelJson: [
    {
      id: "指标一",
      分类一: 400,
    },
    {
      id: "指标二",
      分类一: 650,
    },
    {
      id: "指标三",
      分类一: 130,
    },
    {
      id: "指标四",
      分类一: 100,
    },
    {
      id: "指标五",
      分类一: 550,
    },
    {
      id: "指标六",
      分类一: 100,
    },
    {
      id: "指标七",
      分类一: 310,
    },
  ],
};

const bar_data2 = {
  propsJson: JSON.stringify({
    YPosition: "center",
    legendOffsetLeft: 20,
    // zoomShow: false,
    titleText: "图表标题",
    YhaveLine: false,
    legendposition: "left",
    Ylinecolor: "rgba(255,255,255,0.3)",
    Xhave: true,
    graphicbottom: 9,
    labellayout: "right",
    labelcolor: "rgba(255,255,255,.8)",
    graphicleft: 9,
    Ycolor: "rgba(255,255,255,.8)",
    graphictop: 20,
    graphiccolor: [
      "#5b8ff9",
      "#61ddaa",
      "#65789b",
      "#f6bd16",
      "#7262fd",
      "#78d3f8",
      "#9661bc",
      "#f6903d",
      "#008685",
      "#f08bb4",
    ],
    backImage: "",
    Xlinecolor: "rgba(255,255,255,0.3)",
    graphicright: 1,
    labelhave: true,
    legendlayout: "top",
    backRadius: 0,
    backShowImage: true,
    Yhave: true,
    XhaveLine: false,
    legendorient: "horizontal",
    Xcolor: "rgba(255,255,255,.8)",
    legendcolor: "rgba(255,255,255,.8)",
  }),
  modelJson: [
    {
      id: "类型一",
      指标一: 487,
      指标二: 560,
    },
    {
      id: "类型二",
      指标一: 677,
      指标二: 699,
    },
    {
      id: "类型三",
      指标一: 545,
      指标二: 327,
    },
    {
      id: "类型四",
      指标一: 857,
      指标二: 292,
    },
  ],
};

const data_geo = {
  propsJson: JSON.stringify({
    mapBorderColor: "rgba(68, 173, 254,.2)",
    mapAreaColor: "#003156",
    mapAreaActiveColor: "#045E90",
    scatterSize: 8,
    scatterColorGroup: [
      "#5b8ff9",
      "#61ddaa",
      "#65789b",
      "#f6bd16",
      "#7262fd",
      "#78d3f8",
      "#9661bc",
      "#f6903d",
      "#008685",
      "#f08bb4",
    ],
  }),
  modelJson: [
    {
      name: "海门",
      value: 9,
      type: "示例一",
    },
    {
      name: "舟山",
      value: 20,
      type: "示例一",
    },
    {
      name: "盐城",
      value: 15,
      type: "示例一",
    },
    {
      name: "赤峰",
      value: 16,
      type: "示例一",
    },
    {
      name: "泉州",
      value: 21,
      type: "示例一",
    },
    {
      name: "莱西",
      value: 21,
      type: "示例一",
    },
    {
      name: "日照",
      value: 10,
      type: "示例二",
    },
    {
      name: "胶南",
      value: 20,
      type: "示例二",
    },
    {
      name: "南通",
      value: 23,
      type: "示例二",
    },
    {
      name: "拉萨",
      value: 24,
      type: "示例二",
    },
    {
      name: "云浮",
      value: 40,
      type: "示例二",
    },
    {
      name: "梅州",
      value: 50,
      type: "示例二",
    },
    {
      name: "文登",
      value: 25,
      type: "示例二",
    },
    {
      name: "丹东",
      value: 27,
      type: "示例三",
    },
    {
      name: "烟台",
      value: 28,
      type: "示例三",
    },
    {
      name: "福州",
      value: 29,
      type: "示例三",
    },
    {
      name: "瓦房店",
      value: 30,
      type: "示例三",
    },
    {
      name: "即墨",
      value: 30,
      type: "示例三",
    },
    {
      name: "抚顺",
      value: 31,
      type: "示例三",
    },
    {
      name: "玉溪",
      value: 31,
      type: "示例三",
    },
  ],
};

const data_indication = {
  propsJson: JSON.stringify({
    dataFonttext: "1256",
    titleFontsize: 14,
    dataFontcolor: "rgba(255,255,255,0.8)",
    titleFonttext: "指标一",
    fontalign: "center",
    titleFontcolor: "rgba(255,255,255,0.8)",
    dataFontstyle: [],
    titleFontstyle: [],
    dataFontsize: 24,
  }),
};

const ring_data = {
  propsJson: JSON.stringify({
    circleInnerRadius: 30,
    titleHorizonAlign: "left",
    backRadius: 0,
    titleColor: "rgba(255,255,255,.8)",
    backShowImage: true,
    titleText: "图表标题",
    titleSize: 18,
    circleOutterRadius: 40,
    circleColor: [
      {
        colorStops: [
          {
            color: "#2193b0",
            offset: 0,
          },
          {
            color: "#e90b0e",
            offset: 1,
          },
        ],
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        type: "linear",
        global: false,
      },
      "#61ddaa",
      "#65789b",
      "#f6bd16",
      "#7262fd",
      "#78d3f8",
      "#9661bc",
      "#f6903d",
      "#008685",
      "#f08bb4",
    ],
    backImage: "",
  }),
  modelJson: [
    {
      name: "类型一",
      value: 262,
      子属性1: 890,
      子属性2: "1345km",
    },
    {
      name: "类型二",
      value: 278,
      子属性1: 890,
      子属性2: "1345km",
    },
    {
      name: "类型三",
      value: 660,
      子属性1: 890,
      子属性2: "1345km",
    },
  ],
};

const table_data = {
  propsJson: JSON.stringify({
    theaderBackColor: "rgba(255, 255, 255, 0.1)",
    theaderFontColor: "rgba(255,255,255,0.8)",
    theaderFontSize: 14,
    theaderAlign: "left",
    theaderFontStyles: ["bold"],
    tbodyOpenScroll: true,
    tbodyOddRowColor: "#1f2640",
    tbodyEvenRowColor: "#2d3653",
    tbodyFontColor: "rgba(255,255,255,0.8)",
    tbodyFontSize: 14,
    tbodyAlign: "left",
    tbodyFontStyles: [],
  }),
  modelJson: [
    {
      序号: "1",
      地区: "中国",
      "流量(PV)": 3812,
      用户行为特征: "用户行为特征",
      _rowIndex: 1,
    },
    {
      序号: "2",
      地区: "澳大利亚",
      "流量(PV)": 381222,
      用户行为特征: "用户行为特征",
      _rowIndex: 2,
    },
    {
      序号: "3",
      地区: "中国",
      "流量(PV)": 910231,
      用户行为特征: "用户行为特征",
    },
    {
      序号: "4",
      地区: "加拿大",
      "流量(PV)": "386",
      用户行为特征: "用户行为特征",
    },
    {
      序号: "5",
      地区: "加拿大",
      "流量(PV)": "386",
      用户行为特征: "用户行为特征",
    },
  ],
  stylesJson: JSON.stringify({
    backgroundColor: "rgba(34,40,51,0)",
    x: 16,
    width: 500,
    y: 308,
    height: 306,
    zIndex: 2,
  }),
};

const data_button_group = {
  propsJson: JSON.stringify({
    itemHeight: 40,
    itemGap: 10,
    itemFontColor: "#fff",
    itemFontSize: 20,
    itemBackColor: "rgba(0,0,0,0.5)",
  }),
  modelJson: [
    {
      name: "北京",
      value: 0,
    },
    {
      name: "上海",
      value: 1,
    },
    {
      name: "石家庄",
      value: 2,
    },
    {
      name: "乌鲁木齐",
      value: 3,
    },
  ],
  stylesJson: JSON.stringify({
    x: 152,
    y: 146,
    width: 150,
    height: 190,
    backgroundColor: "rgba(34,40,51,0)",
    zIndex: 6,
  }),
};

const data_percent = {
  propsJson: JSON.stringify({
    dataAText: "标签A",
    dataBText: "标签B",
    dataBValue: 24,
    modelBarHeight: 10,
    modelFontSize: 27,
    dataBColor: "rgba(118,178,255,1)",
    dataAValue: 26,
    dataAColor: "rgba(239,129,32,1)",
  }),
};

// renderFtl2Vue("./ftl/test.ftl", bar_data2);
// renderFtl2Vue("./ftl/bar_1001.ftl", bar_data2);
renderFtl2Vue("./ftl/stripe_6001.ftl", bar_data2);
// renderFtl2Vue("./ftl/background.ftl", background_data)
// renderFtl2Vue("./ftl/title.ftl", title_data)
// renderFtl2Vue("./ftl/backborder.ftl", border_data)
// renderFtl2Vue("./ftl/dataShow.ftl", data_indication)
// renderFtl2Vue("./ftl/geo_23.ftl", data_geo);
// renderFtl2Vue("./ftl/ring_8001.ftl", ring_data);
// renderFtl2Vue("./ftl/table_1901.ftl", table_data);
// renderFtl2Vue("./ftl/button-group_13001.ftl", data_button_group);
// renderFtl2Vue("./ftl/data-percent_60.ftl", data_percent);
